<template>
  <div>
    <div style="padding-bottom: 10px">
      <el-table v-loading="listLoading" :data="ProductList" show-summary>
        <el-table-column
          align="center"
          label="ID"
          prop="OrderListID"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column
          align="center"
          label="业务类型"
          prop="BusinessClassName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="产品名称"
          prop="ProductName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="产品价格"
          prop="ProductPrice"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="产品数量"
          prop="ProductNum"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="产品金额"
          prop="ProductPrice"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="服务期限" width="230">
          <template #default="{ row }">
            {{ row.ServiceStartDate }} 至 {{ row.ServiceEndDate }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template #default="{ row }">
            <el-button type="success" size="small" @click="productEdit(row)">
              详情
            </el-button>
            <el-button
              v-if="OrderFlowState === 1"
              type="danger"
              size="small"
              @click="productDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <vab-query-form v-if="OrderFlowState === 1" style="padding: 5px">
      <vab-query-form-right-panel :span="24">
        <el-form ref="formRef" :model="ProductForm">
          <el-space>
            <el-form-item label="选择产品">
              <el-cascader
                v-model="ProductForm.selectProduct"
                :options="productClassOptions"
                style="width: 300px"
                @change="handleSelectProduct"
              />
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="ProductForm.ProductNum" style="width: 50px" />
            </el-form-item>
            <el-form-item label="产品金额">
              <el-input
                v-model="ProductForm.ProductMoney"
                style="width: 100px"
              />
            </el-form-item>
            <el-form-item label="设定服务期限" style="width: 380px">
              <DateSelect ref="DateSelectRef" @get-date="getDate" />

              <!-- <el-date-picker
                v-model="ProductForm.SeviceDates"
                type="daterange"
                unlink-panels
                start-placeholder="服务开始日期"
                end-placeholder="服务结束日期"
              /> -->
            </el-form-item>
            <el-form-item>
              <el-button :icon="Search" type="primary" @click="saveProduct">
                确认添加
              </el-button>
            </el-form-item>
          </el-space>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <trusteeship ref="trusteeshipRef" />
    <domain ref="domainRef" />
  </div>
</template>

<script>
  import DateSelect from '/src/components/DateSelect.vue'
  import { ProductClassSelect } from '@/api/common'
  import { saveOrderProduct, deleteProduct } from '@/api/businessOrderCreate'
  import Trusteeship from '@/views/business/components/Trusteeship'
  import Domain from '@/views/business/components/Domain'

  export default defineComponent({
    name: 'ProductList',
    components: {
      DateSelect,
      Trusteeship,
      Domain,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        OrderID: 0,
        DateSelectRef: null,
        OrderFlowState: 1,
        disabled: false,
        listLoading: false,
        productClassOptions: [],
        formRef: null,
        editRef: null,
        trusteeshipRef: null,
        domainRef: null,
        ProductList: [],
        ProductForm: {
          OrderListID: 0,
          ProductNum: 1,
        },
        title: '',
      })
      const showList = (OrderInfo, list) => {
        state.OrderID = OrderInfo.OrderID
        state.OrderFlowState = Math.abs(OrderInfo.OrderFlowState)
        state.ProductForm.OrderID = OrderInfo.OrderID
        if (OrderInfo.OrderFlowState !== 1) {
          state.disabled = true
        }
        state.ProductList = list
      }
      const productEdit = (row) => {
        const businessClass = row.BusinessClassID
        switch (businessClass) {
          case 1:
            state.trusteeshipRef.showEdit(row)
            break
          case 2:
            state.editRef.showEdit(row)
            break
          case 3:
            state.editRef.showEdit(row)
            break
          case 4:
            state.editRef.showEdit(row)
            break
          case 5:
            if (row.ProductID == 63) state.domainRef.showEdit(row)
            if (row.ProductID == 64) state.editRef.showEdit(row)
            break
          default:
            // state.giftRef.showEdit(row)
            state.trusteeshipRef.showEdit(row)
        }
      }

      const handleSelectProduct = () => {
        console.log(
          'ProductForm.selectProduct',
          state.ProductForm.selectProduct[2],
          state.productClassOptions
        )
        state.productClassOptions.forEach((item) => {
          if ('children' in item) {
            item.children.forEach((itm) => {
              if ('children' in itm) {
                itm.children.forEach((i) => {
                  if (i.value === state.ProductForm.selectProduct[2]) {
                    state.ProductForm.ProductPrice = i.price
                    state.ProductForm.ProductMoney = i.price

                    console.log('state.ProductForm', state.ProductForm)
                  }
                })
              }
            })
          }
        })
      }

      const productDelete = (row) => {
        console.log(row)
        if (row.OrderListID) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await deleteProduct({
              OrderListID: row.OrderListID,
            })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
          })
        }
      }
      const saveProduct = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await saveOrderProduct(state.ProductForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            state.ProductForm = {
              OrderListID: 0,
            }

            state.DateSelectRef.empty()

            emit('fetch-data')
          }
        })
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { ProductClassOptions },
        } = await ProductClassSelect()
        state.productClassOptions = ProductClassOptions
        state.listLoading = false
      }

      onMounted(() => {
        fetchData()
      })

      const getDate = (data) => {
        state.ProductForm.SeviceDates = data
        console.log(data, '子组件传过来的时间数组')
      }

      return {
        ...toRefs(state),
        showList,
        saveProduct,
        getDate,
        productEdit,
        productDelete,
        handleSelectProduct,
      }
    },
  })
</script>
